<template>
    <div class="order-sidebar">
        <div class="order-sidebar-warp">
            <h2>Order breakdown</h2>
            <ul class="order-sidebar-info">
                <!-- 商品价格 -->
                <li>
                    <span>Production ({{ priceDetail.count }} piece)</span>
                    <strong v-text="getPriceFormat(priceDetail.product)"></strong>
                </li>
                <!-- 空白模板优惠价格 -->
                <li v-if="priceDetail.blank_price">
                    <span>Blank products 5% off</span>
                    <strong v-text="'- ' + getPriceFormat(priceDetail.blank_price)"></strong>
                </li>

                <!-- 吊牌价格 -->
                <li v-if="priceDetail.tag_price">
                    <span type="hangtag">Hang tag</span>
                    <strong v-text="getPriceFormat(priceDetail.tag_price)"></strong>
                </li>

                <!-- 包装价格 -->
                <li v-if="priceDetail.pack_price">
                    <span type="packaging">Package bag</span>
                    <strong v-text="getPriceFormat(priceDetail.pack_price)"></strong>
                </li>

                <!-- 用户等级折扣 -->
                <li v-if="priceDetail.userDiscountPrice">
                    <CommonLevelDiscount :level="levelInfo" type="icon|label|diff" :other="{diff:'- ' + getPriceFormat(priceDetail.userDiscountPrice)}" />
                </li>

                <!-- 优惠劵 -->
                <li v-if="priceDetail.couponDiscountPrice">
                    <span>Coupon {{ priceDetail.couponDiscountLabel }}</span>
                    <strong v-text="'- ' + getPriceFormat(priceDetail.couponDiscountPrice)"></strong>
                </li>

                <!-- 运费 -->
                <li>
                    <span>Shipping</span>
                    <strong v-text="getPriceFormat(priceDetail.shipping)"></strong>
                </li>

                <!-- 税费 -->
                <li v-show="priceDetail.tax != 0">
                    <span>Tax</span>
                    <strong v-text="getPriceFormat(priceDetail.tax)"></strong>
                </li>
            </ul>
            <div class="order-sidebar-total">
                <span>Total:</span>
                <p>
                    <small v-text="currency"></small>
                    <em v-text="getPriceFormat(priceDetail.total)"></em>
                </p>
            </div>

            <!-- 下部分按钮 -->
            <div class="order-sidebar-billing">
                <button @click="openPay()" type="primary" :disabled="forbid">Proceed to payment</button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "OrderUnpaidSidebar",
    props: {
        info: { type: Object, default: () => ({}) },
        priceDetail: { type: Object, default: () => { } },
    },
    data () {
        return {
        };
    },
    computed: {
        currency () { return (this.info || {}).currency },
        rate () { return (this.info || {}).rate || 1 },
        forbid () {
            const info = this.info || {}
            const code = info.order_state;
            return code == 13 || code == 14
        },
        levelInfo () {
            const pricing = this.info.pricing || {}
            return {
                user_level: pricing.user_level,
                user_discount: pricing.level_discount,
                currency: 'USD',
                rate: 1,
            }
        },
    },
    methods: {
        //打开支付弹窗
        openPay () {
            this.$emit("payfor", {
                balance: 0,
                price: parseInt(this.priceDetail.total),
            });
        },

        // 价格格式化
        getPriceFormat (val) {
            const rate = this.rate || 1;
            const value = parseFloat(val * rate / 100) || 0;
            return value.toFixed(2);
        },
    },
};
</script>
<style lang="scss" scoped>
.order-sidebar {
    position: relative;
}

.order-sidebar-warp {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    & > h2 {
        text-align: center;
        border-bottom: 1px solid #dcdcdc;
        line-height: 42px;
        padding: 0;
        height: 40px;
        min-height: 40px;
        box-sizing: border-box;
        font-size: 16px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
    }
}

.order-sidebar-info {
    margin: 16px 14px 0;
    flex: 1;
    & > li {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        line-height: 16px;
        font-size: 14px;
        margin-top: 16px;

        .level-discount {
            font-size: 14px;
            display: flex;
            width: 100%;
            height: 16px;
            &::v-deep span[name='icon'] {
                width: 14px;
                height: 14px;
                background-size: 14px 14px;
                margin-right: 4px;
            }
            &::v-deep span[name='label'] {
                margin-left: 0;
            }
            &::v-deep span[name='diff'] {
                flex: 1;
                text-align: right;
                font-weight: normal;
            }
        }

        span {
            font-size: 14px;
            color: #000;
            position: relative;

            &[type='hangtag']::before {
                content: '';
                display: inline-block;
                width: 16px;
                height: 16px;
                margin-right: 4px;
                vertical-align: top;
                margin-top: 0px;
                border-radius: 16px;
                background-size: 16px 16px;
                background-position: center center;
                background-repeat: no-repeat;
                background-color: #e38c8c;
                background-image: url(https://img.podpartner.com/static/images-20230202/brand/hangtag-icon.png);
            }
            &[type='packaging']::before {
                content: '';
                display: inline-block;
                width: 16px;
                height: 16px;
                margin-right: 4px;
                vertical-align: top;
                margin-top: 0px;
                border-radius: 16px;
                background-size: 16px 16px;
                background-position: center center;
                background-repeat: no-repeat;
                background-color: #9b89bc;
                background-image: url(https://img.podpartner.com/static/images-20230202/brand/package-icon.png);
            }
        }
        small {
            flex: 1;
            text-align: right;
            color: #000000;
            font-weight: normal;
            font-size: 12px;
            margin-right: 8px;
        }
        strong {
            color: #000000;
            font-weight: normal;
        }
    }
}

.order-sidebar-total {
    position: relative;
    margin: 48px 14px 0;
    padding-top: 16px;
    border-top: 1px dashed #e6e6e6;

    & > span {
        font-size: 16px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 18px;
    }

    & > p {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        margin-top: 10px;

        small {
            font-size: 16px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000000;
            line-height: 18px;
            position: relative;
            top: -1px;
            margin-right: 4px;
        }

        em {
            font-size: 26px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000000;
            line-height: 28px;
        }
    }
}

.order-sidebar-billing {
    margin: 10px 14px 14px;
    display: flex;
    button {
        width: 100%;
        height: 40px;

        &[disabled] {
            background: #ebebeb;
            border-color: #e0e0e0;
            color: #9e9e9e;

            &:hover {
                background: #ebebeb;
                color: #9e9e9e;
            }
        }
    }
}
</style>
